<template>
  <div class="centerDetail">
    <Header />
    <div class="Breadcrumbs">
      <!-- <Breadcrumb /> -->
      <el-button size="mini" class="pubBtn3" style="margin-right:20px;" type="button"><router-link :to='{path:"/center"}'>返回</router-link></el-button>
      <el-breadcrumb separator="-">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to='{path:"/center"}'>消息中心</el-breadcrumb-item>
        <el-breadcrumb-item><span class="no-redirect">消息详情</span> </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="centerDetail_box">
      <el-main>
          <p style="width:800px;" class="centerDetail_box_p sz"><el-tag v-if="detailArr.tag" effect="dark" size="small" style="margin-right:5px;" type="danger">{{detailArr.tag}}</el-tag>{{detailArr.title}}</p>
          <p style="width:800px;" class="contextSize">{{detailArr.ctime}} <span style="float: right;">浏览量：{{detailArr.click}}</span></p>
        <el-row class="martop">
          <el-col class="info_item" :lg="24">
            <p class="context" v-html="detailArr.content"></p>
          </el-col>
        </el-row>
        <!-- <div style="margin:20px 0;" v-for="(item,index) in detailArr.annex" :key="index">
          <a  style="margin:0 20px 0 0;color: rgb(52, 120, 255);"  :href="item" target="_blank" rel="noopener noreferrer">点击查看附件{{item.length > 0?index+1:""}}</a>
        </div> -->
                <div style="margin:20px 0;" v-for="(item,index) in detailArr.annex" :key="index">
                  <!-- <el-button  style="margin:20px 0;" type="primary"> <i class="el-icon-download"></i> 点击查看附件{{item.length > 0?index+1:""}}<i class="el-icon-arrow-right el-icon--right"></i></el-button> -->
          <a class="a_download s_flex s_justify_content s_align_items" :href="item.file  " target="_blank" rel="noopener noreferrer">
            <!-- 点击查看附件{{item.length > 0?index+1:""}} -->
            <div  class="s_flex s_justify_content s_align_items">
               <i class="iconfont icon-wenjian"></i>
              <span>{{item.name}}</span>
            </div>
            <div>
               <i class="iconfont icon-xiazai"></i>
            </div>
          </a>
        </div>
        <el-row class="scot">
          <el-col :lg="24">
            <p class="context"><span>  </span><span @click="dialogVisible =true" style="color: #3478FF;margin-left:10px;cursor:pointer;">可点击退订
                ></span></p>
          </el-col>
          <el-col v-if="detailArr.comment !== undefined && detailArr.comment.length >0" :lg="24" class="chat">
            <div :class="['chat-item', item.type == '1' ? 'left' : 'right']" v-for="(item,index) in detailArr.comment" :key="index">
              <div class="user">
                <img class="avatar" :src="item.thumb" />
              </div>
              <div class="meta">
                <p class="hd">
                  <span class="name">{{item.name}}</span>
                  <span class="time">{{item.ctime}}</span>
                </p>
              </div>
              <div class="content text">
                <span>{{item.content}}</span>
              </div>
            </div>
          </el-col>
          <el-col style="margin-top:30px;" :xl="24">
            <div  class="addChat">
              <el-input placeholder="请输入你要回复的文字" v-model="chatVal">
                <el-button slot="append" @click="chat" class="pubBtn3">发送</el-button>
              </el-input>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </div>
    <el-dialog  :close-on-click-modal='false' title="选择退订类型" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-tag style="margin-right:20px; margin-bottom:10px;" v-for="(tag,index) in tags" :effect="tag.effect"  :type="tag.type" @click="addTag(index)" >
        {{tag.name}}
      </el-tag>
      <span slot="footer" class="dialog-footer">
        <el-button class="pubBtn3" @click="Unsub">退订</el-button>
      </span>
    </el-dialog>
    <Service/>
  </div>
</template>

<script>
  import Header from "@/components/Header"
  import Breadcrumb from '@/components/Breadcrumb'
  import {messageDetail,messageSend,messageUnsub,messageGetOpera} from '@/api'
  import Service from '@/components/Service'
  export default {
    components: {
      Header,
      Breadcrumb,
      Service
    },
    data() {
      return {
        chatVal: '',
        dialogVisible: false,
        detailArr:[],
        operate_key:[],
        id:null,
        tags:[]
      }
    },
    mounted() {
        this.getDeta();
    },
    methods: {
      handleClose() {
        this.dialogVisible = false
      },
      async getDeta(){
        try{
          this.id = this.$route.query.id;
          this.detailArr = await messageDetail({message_id:this.id});
          this.tags= await messageGetOpera();
        } catch (e){
          this.$message.error(e.message)
        }
      },
      async chat(){
        if(this.chatVal){
          try{
            await messageSend({message_id:this.id,content:this.chatVal})
            this.chatVal = '';
            this.getDeta();
          } catch (e){
            this.$message.error(e.message)
          }
        }

      },
      addTag(index){
        if(this.operate_key.indexOf(this.tags[index].id) == -1){
          this.operate_key.push(this.tags[index].id)
          this.tags[index].type = "";
          this.tags[index].effect = "dark"
        }else{
          this.operate_key.splice(this.operate_key.indexOf(this.tags[index].id),1)
          this.tags[index].type = "warning"
          this.tags[index].effect = "plain"
        }
      },
      async Unsub(){
        try{
          await messageUnsub({operate_key:this.operate_key})
          this.$message.success("退订成功")
          this.dialogVisible = false;
          this.$router.replace("/center");
        } catch (e){
          this.$message.error(e.message)
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .pagination {
    margin: 15px 0;
  }

  .Breadcrumbs {
    height:54px;
    line-height:54px;
    display: flex;
    align-items: center;
    background-color: #f4f5f7;
    width: 100%;
    margin-top: 100px;
    padding-left: 320px;
    margin-left:0 !important;
    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }
  .context{
    /deep/ img{
      // width: 100%;
    }
  }
  .centerDetail .el-main {
    margin: 0;
    padding: 47px 0;
    .chat{
      background: #F7F9FC;
    }
    .contextSize {
      color: #9A9A9A;
      margin-top: 20px;
    }
  }

  .centerDetail_box {
    width:800px;
    margin-left:330px;
  }

  .martop {
    border-top: 1px solid #D6D6D6;
    border-bottom: 1px solid #D6D6D6;
    margin-top: 20px;
    padding: 27px 0;
    width:800px;
  }

  .info_item p {
    margin-bottom: 20px;
    line-height: 1.5;
  }

  .scot {
    margin-top: 35px;
  }

  .centerDetail .right .content{
    font-size:14px;
    font-weight:400;
    color:rgba(86,165,255,1);
    background:rgba(236,245,255,1);
    border:1px solid rgba(202,228,255,1);
    &::after{
      border-color:rgba(236,245,255,1) transparent transparent;
    }
  }

  .centerDetail_box_p{
    font-weight:bold;
  }
.a_download {
  background: #f2f4f9;
  width: 50%;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
  .iconfont {
    font-size: 25px;
  }
  .icon-wenjian {
    color: #3377ff;
  }
  span {
    margin-left: 10px;
  }
}
  @media (max-width:1360px) {
    .centerDetail_box {
      margin-left:270px;
    }

    .Breadcrumbs[data-v-f68f27be] {
      padding-left: 260px;
    }
  }
</style>
